<template>
    <v-progress-linear :color="color" :fixed="fixed" :top="top" v-if="!destroy" v-show="active" indeterminate/>
</template>

<script>
    export default {
        name: "Progress",
        props: {
            color: String,
            fixed: {type: Boolean, default: true},
            top: {type: Boolean, default: true}
        },
        data() {
            return {
                destroy: false,
                active: false,
            }
        },
        methods: {
            show(color) {
                this.active = true;
                if (color) this.color = color;
            },
            close() {
                this.active = false;
                this.destroy = true;
                setTimeout(() => {
                    this.$destroy();
                }, 100)
            }
        }
    }
</script>

<style scoped lang="scss">
    .v-progress-linear {
        z-index: 100;
    }
</style>